<script setup lang="ts">
import { ref, computed } from "vue";

const firstName = ref("张");
const lastName = ref("三");

// 方式一：选项式写法
const fullName = computed({
  get() {
    return [firstName.value, lastName.value].join("-");
  },
  set(v) {
    [firstName.value, lastName.value] = v.split("-");
  },
});

// 方式二：函数式写法，只支持getter
const fullName1 = computed(() => firstName.value + lastName.value);
</script>

<template>
  <div class="row"><input type="text" v-model="firstName" /></div>
  <div class="row"><input type="text" v-model="lastName" /></div>
  <div class="row">
    全名（方式一）：{{ fullName }}
    <button @click="fullName = '李-四'">修改</button>
  </div>

  <div class="row">全名（方式二）：{{ fullName1 }}</div>
</template>

<style scoped>
.row {
  margin: 0.25rem auto;
}
</style>
